<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- tab选项卡 -->
        <el-tabs v-model="activeName">
          <el-tab-pane label="组织结构" name="first">
            <!-- 栅格布局 -->
            <tree-tools :tree-node="company" :is-root="true" />
            <!-- 树形控件 -->
            <el-tree class="node-tree" :data="departs" :default-expand-all="false" :props="defaultProps" icon-class="a" @node-expand="expandHandler" @node-collapse="collapseHandler">
              <!-- 插槽 -->
              <tree-tools slot-scope="{ data }" :tree-node="data" />
            </el-tree>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { getDepartments } from '@/api/departments'
export default {
  components: {
    TreeTools
  },
  data() {
    return {
      activeName: 'first',
      // 公司数据
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      // 部门数据
      departs: [
        {
          name: '总裁办',
          manager: '张三',
          expanded: false, // 增加展开状态
          children: [
            {
              name: '董事会',
              manager: '李四'
            }
          ]
        },
        {
          name: '行政部',
          manager: '赵六',
          expanded: false,
          children: [
            {
              name: '采购部',
              manager: '钱七'
            },
            {
              name: '办公室',
              manager: '王八'
            }
          ]
        },
        { name: '人事部', manager: '朱九' }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 展开时的处理函数
    expandHandler(obj, node) {
      const row = this.departs.find(item => item.name === obj.name)
      row.expanded = node.expanded
    },
    // 折叠时的处理函数
    collapseHandler(obj, node) {
      const row = this.departs.find(item => item.name === obj.name)
      row.expanded = !node.expanded
    },
    // 获取组织架构数据
    async getDepartments() {
      const result = await getDepartments()
      console.log(result)
      this.company
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__content {
  margin-top: 50px;
  margin-left: 100px;
}
.tree-card {
  padding: 30px;
  font-size: 14px;
}
::v-deep .el-tree-node__content {
  height: 40px;
  line-height: 40px;
}
</style>
